<template>
  <div id="app">
    <!-- <ListLayout v-slot="{ item }">
      <img
        v-if="item.thumbnail"
        class="list-layout__item__thumbnail"
        :src="item.thumbnail"
        :alt="item.name"
        width="200"
      />
      <div class="list-layout__item__name">{{ item.name }} zzz</div>
    </ListLayout> -->
    <ListLayout>
      <template #thumbnail="{ item }">
        <img
          v-if="item.thumbnail"
          class="list-layout__item__thumbnail"
          :src="item.thumbnail"
          :alt="item.name"
          width="200"
        />
      </template>
      <template #actions>
        <div class="list_layout__item__footer">
          <button class="list-layout__item__footer">Add to cart</button>
        </div>
      </template>
    </ListLayout>
  </div>
</template>

<script lang="ts">
import ListLayout from "./MyComponent.vue";
import { defineComponent } from "vue";

export default defineComponent({
  name: "ProductItemList",
  components: {ListLayout},
  data() {
    return {
      price: 100,
    };
  },
});
</script>
